<template>
  <div class="page integral">
    <custom title="积分" :is-back="false" bg-color="linear-gradient(90deg, #EF4214 1%, #FF8213 100%)" color="#FFFFFF" />
    <div class="integralTop">
      <div class="flex justify-sb align-center integralTopCont">
        <div class="top">
          <div class="topTit">我的积分</div>
          <div class="topNum">1000</div>
        </div>
        <div class="topBox">积分购买</div>
      </div>
    </div>
    <div class="cont">
      <div class="flex contTop">
        <div class="contTopTag"></div>
        <div class="contTopTit">积分兑换</div>
      </div>
      <div class="flex contList">
        <!-- <div class="contListBox contListBoxAct">全部</div>
        <div class="contListBox">实物兑换</div>
        <div class="contListBox">优惠券兑换</div> -->
      </div>
      <div class="flex justify-sb shopBox">
        <div class="shop" @click="onGoDetail()">
          <van-image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2020621817,2408210872&fm=26&gp=0.jpg" class="shopImg" fit="contain" :show-loading="false" />
          <div class="shopDetail">百威啤酒*3</div>
          <div class="flex justify-sb align-center shopCont">
            <div class="shopContL">5121积分</div>
            <div class="shopContR">立即兑换</div>
          </div>
        </div>
        <div class="shop" @click="onGoDetail()">
          <van-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=435715367,3914322397&fm=26&gp=0.jpg" class="shopImg" fit="contain" :show-loading="false" />
          <div class="shopDetail">乐薯片*3</div>
          <!-- <div class="flex justify-sb align-center shopCont">
            <div class="shopContL">15元</div>
            <div class="shopContR">立即兑换</div>
          </div> -->
          <div class="flex justify-sb align-center shopCont">
            <div class="shopContL">8积分 + 15元</div>
            <div class="shopContR">立即兑换</div>
          </div>
        </div>
        <div class="shop" @click="onGoDetail()">
          <van-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3648900530,2184452992&fm=26&gp=0.jpg" class="shopImg" fit="contain" :show-loading="false" />
          <div class="shopDetail">惠普台式电脑</div>
          <div class="flex justify-sb align-center shopCont">
            <div class="shopContL">6666644积分</div>
            <div class="shopContR">立即兑换</div>
          </div>
        </div>
      </div>
    </div>
    <van-divider :style="{ borderColor: '#E5E5E5',padding:'0 40px' }">没有更多，敬请期待</van-divider>
    <tabbar />
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
import tabbar from '@/components/tabbar.vue'
export default {
  name: 'Coupon',
  components: {
    custom,
    tabbar
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    onGoDetail() {
      this.$router.push('/integral-shop-detail')
    }
  }
}
</script>

<style scoped>
.page{
  background: linear-gradient(0deg, #F2F2F2 0%, #F6E8E8 98%);
}
/* .custom{
  height: 100px;
  line-height: 100px;
  background: linear-gradient(90deg, #EF4214 1%, #FF8213 100%);
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  color: #FFFFFF;
} */
.integralTop{
  padding: 0 30px;
  background: url('../../assets/integral/bg.png') no-repeat;
  background-size: 100% 100%;
  height: 280px;
}
.integralTopCont{
  height: 194px;
  color: #FFF;
}
.topTit{
  font-size: 28px;
}
.topNum{
  font-size: 60px;
  font-weight: bold;
  color: #FFFFFF;
}
.topBox{
  width: 180px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 30px;
  font-size: 28px;
  color: #EC3703;
}
.cont{
  padding: 0 30px;
  background: linear-gradient(0deg, #F2F2F2 0%, #F6E8E8 98%);
  border-radius: 20px;
  margin-top: -86px;
}
.contTop{
  height: 86px;
  align-items: flex-end;
}
.contTopTag{
  width: 6px;
  height: 30px;
  background: linear-gradient(0deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 3px;
  margin-right: 36px;
}
.contList{
  padding: 20px 0;
}
.contListBox{
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  font-size: 28px;
  color: #5A5A5A;
  margin-right: 10px;
}
.contListBoxAct{
  background: #F86614;
  border: 1px solid #F86614;
  color: #FFFFFF;
}
.shopBox{
  flex-wrap: wrap;
}
.shop{
  width: 298px;
  /* height: 296px; */
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 30px;
}
.shopImg{
  width: 100%;
  height: 170px;
}
.shopDetail{
  font-size: 26px;
  color: #020202;
  margin: 12px 0 25px;
}
.shopCont{
  font-size: 24px;
  color: #F86614;
}
.shopContL{
  width: 150px;
}
.shopContR{
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #F86614;
  border-radius: 12px;
  font-size: 22px;
  color: #FFFFFF;
}
</style>
